<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:business:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete(searchdata)"
          v-hasPermi="['system:business:remove']">删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="huodongList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="标题" align="center" prop="hdname" />
      <el-table-column label="简介" align="center" prop="hdbrief" />
      <el-table-column label="封面图" align="center" width="68">
        <template slot-scope="scope">
          <el-image :src="scope.row.hdpic" alt="" weight="20" style="width:60px;" :preview-src-list="srcList"
            @click="hdpic(scope.row)"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center" width="55">
        <template slot-scope="scope">
          <el-image :src="scope.row.detailpic" alt="" weight="20" style="width:60px;" :preview-src-list="srcList1"
            @click="detailpic(scope.row)"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" align="center" prop="hdstarttime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.hdstarttime, '{YY}-{MM}-{DD}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="hdendtime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.hdendtime, '{YY}-{MM}-{DD}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动状态" align="center" prop="type">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" style="color: #ff4949;" @click="shanchu(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加对话框 -->
    <el-dialog :title="state == 0 ? '新增活动' : '修改活动'" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row :gutter="15">
          <el-form-item label="标题" prop="hdname">
            <el-input v-model="form.hdname" placeholder="请输入标题" />
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="简介" prop="hdbrief">
            <el-input v-model="form.hdbrief" type="textarea" placeholder="请输入简介" />
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="活动开始时间" prop="hdstarttime">
            <el-date-picker v-model="form.hdstarttime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:100%"
              type="date" placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="活动结束时间" prop="hdendtime">
            <el-date-picker v-model="form.hdendtime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:100%"
              type="date" placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="封面图" prop="hdpic">
            <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
              :on-progress="progress" name="fileName">
              <img v-if="form.hdpic" :src="form.hdpic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="isShowJinDuTiao" type="circle" :percentage="percentage" :width="78" class="jdt" />
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-form-item label="详情页" prop="detailpic">
            <el-upload class="avatar-uploader" :action="url" accept=".jpg, .png" :headers="headers"
              :show-file-list="false" :on-success="handleAvatarSuccesso" :before-upload="beforedetailpicAvatarUpload"
              :on-progress="progress1"
               name="fileName">
              <img v-if="form.detailpic" :src="form.detailpic" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="isShowJinDuTiao1" type="circle" :percentage="percentage1" :width="78" class="jdt" />
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="lock" @click="xinzeng">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import {
  huodonglist,
  huodongxinzeng,
  huodongDelete,
  huodongxiugai
} from "@/api/platform/platform.js";
import {
  getToken
} from '@/utils/auth'
export default {
  name: "Huodong",
  data() {
    var validateStartTime = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error('开始时间不能为空'))
      } else {
        if (new Date(this.form.hdstarttime).getTime() <= new Date().getTime()) {
          callback()
        } else {
          callback()
        }
      }
    };
    var validateEndTime = (rule, value, callback) => {
      if (value === undefined) {
        callback(new Error('结束时间不能为空'))
      } else {
        if (
          new Date(this.form.hdstarttime).getTime() >=
          new Date(this.form.hdendtime).getTime()
        ) {
          callback(new Error('结束时间必须大于开始时间！'))
        } else {
          callback()
        }
      }
    }
    return {
      lock:false,
      isShowJinDuTiao: false,
      isShowJinDuTiao1: false,
      percentage: 0,
      percentage1: 0,
      loading1: false,
      loading2: false,
      srcList: [],
      srcList1: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      url: process.env.VUE_APP_BASE_API + "/upload/fileUpload",
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        start: '',
        end: ''
      },
      idd: {
        id: ''
      },
      huodongList: [], //活动列表
      open: false, //新增弹框是否展示
      title: '', //新增弹框标题
      form: {
        hdname: "",
        hdbrief: "",
        hdstarttime: "",
        hdendtime: "",
        hdtype: "",
        hdpic: "",
        detailpic: "",
      }, //新增弹框数据
      loading: true,
      state: 0,  //0新增  1修改
      // 表单校验
      rules: {
        hdname: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        hdbrief: [{ required: true, message: "简介不能为空", trigger: "blur" }],
        hdstarttime: [{ required: true, validator: validateStartTime, trigger: "change" }],
        hdendtime: [{ required: true, validator: validateEndTime, trigger: "change" }],
        hdpic: [{ required: true, message: '请上传封面图', trigger: 'change' }],
        detailpic: [{ required: true, message: '请上传详情图', trigger: 'change' }]
      },
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询商家列表 */
    async getList() {
      this.loading = true;
      let res = await huodonglist(this.queryParams);
      if (res.code == 200) {
        this.huodongList = res.rows;
        res.rows.forEach(item => {
          this.srcList.push(item.hdpic);
          this.srcList1.push(item.detailpic);
        })
        this.total = res.total;
        this.loading = false;
      }
    },
    getBirthDate(date) {
      this.addUserForm.birth = date
    },
    xinzeng() {
      if (this.state == 0) {
        this.lock=true;
        huodongxinzeng(this.form).then(response => {
          this.lock=false;
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.loading = true;
          this.getList();
        });
      } else {
        this.lock=true;
        huodongxiugai(this.form).then(response => {
          this.lock=false;
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.loading = true;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete() {
      if (this.idd.id == '') {
        this.$modal.msgError('请先选择要处理的信息')
      } else {
        huodongDelete({ id: this.idd }).then(response => {
          this.$modal.msgSuccess('删除成功');

        })
      }
      this.getList();
    },
    shanchu(zhi) {
      this.idd = zhi.id;
      this.handleDelete()
    },
    /** 搜索按钮操作 */
    handleQuery(queryParams) {
      selectAllbusiness(queryParams).then(response => {
        this.businessList = response.data.data;
        this.total = response.data.data.length;
      })
    },
    handleUpdate(queryParams) {
      this.form = {
        hdname: queryParams.hdname,
        hdbrief: queryParams.hdbrief,
        hdstarttime: this.parseTime(queryParams.hdstarttime, '{YY}-{MM}-{DD}'),
        hdendtime: this.parseTime(queryParams.hdendtime, '{YY}-{MM}-{DD}'),
        hdtype: '',
        hdpic: queryParams.hdpic,
        detailpic: queryParams.detailpic,
        id: queryParams.id
      };
      this.open = true;
      this.state = 1;
    },
    // 缩略图
    handleAvatarSuccess(res, file) {
      this.form.hdpic = res.data
      this.isShowJinDuTiao = false;
      this.percentage = 0;
    },
    handleAvatarSuccesso(res, file) {
      this.form.detailpic = res.data
      this.isShowJinDuTiao1 = false;
      this.percentage1 = 0;
    },
    progress(event, file, fileList) {
      let num = ((event.loaded / event.total) * 100) | 0;
      this.percentage = num;
    },
    progress1(event, file, fileList) {
      let num = ((event.loaded / event.total) * 100) | 0;
      this.percentage1 = num;
    },
    // 详情页
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      this.isShowJinDuTiao = true;
    },
    beforedetailpicAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      this.isShowJinDuTiao1 = true;
    },
    
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        start: '',
        end: ''
      };
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.state = 0;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        hdname: "",
        hdbrief: "",
        hdstarttime: "",
        hdendtime: "",
        hdtype: "",
        hdpic: "",
        detailpic: "",
      };
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.idd = ""
      for (let i = 0; i < selection.length; i++) {
        if (selection.length - 1 == i) {
          this.idd = this.idd + selection[i].id
        } else {
          this.idd = this.idd + selection[i].id + ','
        }
      }

    },
    hdpic(row) {
      this.srcList.push(row.hdpic);
    },
    detailpic(row) {
      this.srcList1.push(row.detailpic);
    }
  }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px solid #8c939d;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  border: 1px solid #8c939d;
}

.avatar {
  width: 78px;
  height: 78px;
  display: block;
}

.el-loading-mask {
  width: 78px;
}
.jdt {
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.6);
}
</style>
